<template>
  <div id="app">
    <!-- 基础布局实现 -->
    <!-- <ELRow>
      <ELCol :span="12">
        <div class="grid-content bg-purple-dark"></div>
      </ELCol>
      <ELCol :span="12">
        <div class="grid-content bg-purple-dark"></div>
      </ELCol>
    </ELRow>
    <ELRow>
      <ELCol :span="8"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="8"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow> -->

    <!-- 分栏间隔实现 -->
    <!-- <ELRow :gutter="20">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow> -->

    <!-- 分栏偏移 -->
    <!-- <ELRow :gutter="20">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6" :offset="6" :push="6"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
    </ELRow>
    <ELRow :gutter="20">
      <ELCol :span="6" :offset="6" :pull="6"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
      <ELCol :span="6" :offset="6"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
    </ELRow> -->

    <!-- 对齐方式 -->
    <!-- <ELRow type="flex" class="row-bg">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple-light"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow>
    <ELRow type="flex" class="row-bg" justify="center">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple-light"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow>
    <ELRow type="flex" class="row-bg" justify="end">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple-light"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow>
    <ELRow type="flex" class="row-bg" justify="space-between">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple-light"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow>
    <ELRow type="flex" class="row-bg" justify="space-around">
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple-light"></div></ELCol>
      <ELCol :span="6"><div class="grid-content bg-purple"></div></ELCol>
    </ELRow> -->

    <!-- 响应式布局 -->
    <!-- <ELRow :gutter="10">
      <ELCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
      <ELCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
        ><div class="grid-content bg-purple-light"></div
      ></ELCol>
      <ELCol :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
      <ELCol :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
        ><div class="grid-content bg-purple-light"></div
      ></ELCol>
    </ELRow> -->

    <!-- 基于断点的隐藏类 -->
    <ELRow :gutter="10" tag="p">
      <ELCol
        tag="h1"
        class="hidden-xs-only"
        :xs="8"
        :sm="6"
        :md="4"
        :lg="3"
        :xl="1"
        ><div class="grid-content bg-purple"></div
      ></ELCol>
    </ELRow>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
